// 优势动画效果
function initAdvantageAnimation() {
    // 检查是否存在id="advantages"的元素
    const advantageElement = document.getElementById('advantages');
    if (!advantageElement) {
        console.log('Advantage element not found, skipping animation initialization');
        return;
    }

    console.log('Advantage animation initialized');

    // 数字增长动画
    function animateNumber(element, target, duration = 2000) {
        let start = 0;
        const startTime = performance.now();
        
        // 保存原有的span标签内容
        const spanElement = element.querySelector('span');
        const spanContent = spanElement ? spanElement.outerHTML : '';
        
        function updateNumber(currentTime) {
            const elapsed = currentTime - startTime;
            const progress = Math.min(elapsed / duration, 1);
            
            // 使用更平滑的缓动函数
            const easeOutExpo = progress === 1 ? 1 : 1 - Math.pow(2, -10 * progress);
            const current = Math.floor(easeOutExpo * target);
            
            // 更新数字时保留span标签
            element.innerHTML = current + spanContent;
            
            if (progress < 1) {
                requestAnimationFrame(updateNumber);
            } else {
                element.innerHTML = target + spanContent;
            }
        }
        
        requestAnimationFrame(updateNumber);
    }

    // 滚动显示动画
    function handleScrollAnimation() {
        const cards = document.querySelectorAll('.advantage-card');
        const stats = document.querySelectorAll('.stat-item');

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('animate-in');
                    if (entry.target.classList.contains('stat-item')) {
                        const numberElement = entry.target.querySelector('h4');
                        // 提取纯数字部分
                        const target = parseInt(numberElement.textContent.match(/^\d+/)[0]);
                        animateNumber(numberElement, target);
                    }
                    observer.unobserve(entry.target);
                }
            });
        }, {
            threshold: 0.2,
            rootMargin: '50px'
        });

        cards.forEach(card => observer.observe(card));
        stats.forEach(stat => observer.observe(stat));
    }

    // 卡片悬停效果
    function initCardHoverEffects() {
        const cards = document.querySelectorAll('.advantage-card');
        
        cards.forEach(card => {
            const img = card.querySelector('img');
            const overlay = card.querySelector('.card-overlay');
            const ad_height = card.querySelector('.card-overlay .ad_height');
            const paragraph = card.querySelector('.card-overlay p');
            overlay.style.bottom = `-${paragraph.offsetHeight}px`;
            card.addEventListener('mouseenter', () => {
                // 使用 transform 和 transition 实现更流畅的动画
                // card.style.transform = 'translateY(-0.5rem)';
                // 图片缩放效果
                // if (img) {
                //     img.style.transform = 'scale(1.05)';
                // }
                
                // 渐变背景动画
                // if (overlay) {
                //     overlay.style.background = 'linear-gradient(0deg, rgba(35, 39, 51, 0.95) 80%, rgba(35, 39, 51, 0.20) 100%)';
                // }

                // 处理段落显示动画
                if (paragraph) {
                    requestAnimationFrame(() => {
                      overlay.style.bottom = '0';
                      // overlaytit.style.transform = `translateY(-${paragraph.offsetHeight}px)`;
                     
                    });
                }
            });

            card.addEventListener('mouseleave', () => {
                card.style.transform = 'translateY(0)';
                card.style.boxShadow = 'none';
                if (img) {
                    img.style.transform = 'scale(1)';
                }
                
                // if (overlay) {
                //     overlay.style.background = 'linear-gradient(0deg, rgba(35, 39, 51, 0.92) 80%, rgba(35, 39, 51, 0.10) 100%)';
                // }

                // 处理段落隐藏动画
                if (paragraph) {
                    overlay.style.bottom = `-${paragraph.offsetHeight}px`;
                    // 等待过渡完成后设置 display: none
                    setTimeout(() => {
                        if (!card.matches(':hover')) {
                        }
                    }, 400); // 与 CSS transition 时间匹配
                }
            });
        });
    }

    // 添加CSS过渡效果
    function addTransitionStyles() {
        const style = document.createElement('style');
        style.textContent = `
            .advantage-card {
                transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .advantage-card img {
                transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .advantage-card .card-overlay {
                transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .advantage-card .card-overlay h3 {
                transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .advantage-card .card-overlay p {
                transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            }
        `;
        document.head.appendChild(style);
    }

    // 初始化所有动画
    addTransitionStyles();
    handleScrollAnimation();
    initCardHoverEffects();
}

// 确保在组件加载完成后执行
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initAdvantageAnimation);
} else {
    initAdvantageAnimation();
} 